<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: ZJZ
 * @Date: 2021-07-27 13:47:27
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-06-01 14:54:36
-->
<template>
  <div class="app-container">
    <div class="header">
      <div class="bread">
        <img src="@/assets/images/icon-batch.png" alt="" />
        <span style="margin-left: 10px">考试批次设置</span>
      </div>
      <div class="ipt">
        <el-input
          v-model="identification"
          placeholder="请输入批次名称/考试名称"
          size="normal"
          clearable
          class="ipt-el"
        ></el-input>
        <el-button type="primary" size="default" @click="query">
          搜索
        </el-button>
      </div>
      <div class="btn">
        <el-button
          type="primary"
          size="default"
          @click="newBatch"
          v-hasPermi="['registerset:batchexa:add']"
        >
          + 新增批次
        </el-button>
        <el-button
          size="default"
          @click="getExl"
          v-hasPermi="['registerset:batchexa:export']"
          >导出</el-button
        >
      </div>
    </div>
    <div class="chooise" v-if="selShow">
      <span>场景：</span>
      <el-select
        v-model="value"
        ref="sel"
        clearable
        @visible-change="(v) => visibleChange(v, 'sel', selClick, admClick)"
        class="sel-sence"
        @change="querySceneList"
      >
        <el-option
          v-for="item in options"
          :key="item.sceneId"
          :label="item.name"
          :value="item.sceneId"
        >
        </el-option>
      </el-select>
      <el-button
        type="primary"
        icon="iconfont icon-shaixuan"
        size="default"
        @click="screen"
      >
        高级筛选
      </el-button>
    </div>
    <div class="sel" v-else>
      <span> 已选中 {{ multipleSelection.length }} 项</span>
      <el-button
        type="primary"
        size="default"
        @click="upShelf"
        plain
        v-if="
          multipleSelection[0].openState !== '上架' &&
          multipleSelection.length == 1
        "
        v-hasPermi="['registerset:batchexa:upShelf']"
        >上架</el-button
      >
      <el-button
        type="primary"
        size="default"
        @click="downShelf"
        plain
        v-if="
          multipleSelection[0].openState !== '下架' &&
          multipleSelection.length == 1
        "
        v-hasPermi="['registerset:batchexa:downShelf']"
        >下架</el-button
      >

      <el-button
        type="primary"
        size="default"
        plain
        :disabled="disabled"
        @click="changeCharge"
        v-hasPermi="['registerset:batchexa:replace']"
      >
        更换负责人
      </el-button>
      <el-button
        type="primary"
        size="default"
        plain
        :disabled="ShelvesDisabled"
        @click="edit"
        v-hasPermi="['registerset:batchexa:edit']"
      >
        编辑
      </el-button>
      <el-button
        type="primary"
        plain
        size="default"
        @click="addTeam"
      >
        添加团队成员
      </el-button>
      <el-button
        type="danger"
        size="default"
        plain
        @click="del"
        :disabled="ShelvesDisabled"
        v-hasPermi="['registerset:batchexa:del']"
      >
        删除
      </el-button>
    </div>
    <div v-if="scenArr !== []" class="scenF">
      <div v-for="(item, index) in scenArr" :key="index" class="scenF-content">
        <div class="scenF-detail" @click="scenSearch(item.sceneId)">
          {{ item.sceneList }}
          <i
            class="el-icon-circle-close"
            @click.stop="scenDel(index)"
            style="margin-left: 10px"
          ></i>
        </div>
      </div>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        style="width: 100%"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        :height="tableHight"
      >
        <el-table-column type="selection"> </el-table-column>

        <template v-for="(item, index) in switchShow">
          <el-table-column
            :key="index"
            :label="item.label"
            v-if="showH(item, index)"
            :prop="item.stage"
            :width="item.width"
            :show-overflow-tooltip="true"
            fixed="left"
          >
            <template slot-scope="scope">
              <span class="batch" @click="drawer(scope.row)">
                {{ scope.row.batchName }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            :key="index"
            :label="item.label"
            :prop="item.stage"
            v-show="item.value"
            v-if="item.label !== '批次名称' && item.value"
            :show-overflow-tooltip="true"
            :width="item.width"
          >
          </el-table-column>
        </template>
        <el-table-column fixed="right">
          <template slot="header">
            <i class="iconfont icon-shujupeizhi" @click.stop="tableShow"></i
          ></template>
        </el-table-column>
      </el-table>
      <div class="wuhu" v-show="dialog.dialogTableVisible">
        <table-sh
          :dialog="dialog"
          :switchShow.sync="switchShow"
          v-if="dialog.dialogTableVisible"
          @submit="getSwitchList"
          class="sh"
        >
        </table-sh>
      </div>
    </div>
    <!-- 分页器 -->
    <el-pagination
      prev-text="上一页"
      next-text="下一页"
      background
      :page-size="pageSize"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      layout=" ->,total, sizes, prev, pager, next, jumper "
      :total="total"
    >
    </el-pagination>

    <!-- table得显示与隐藏 -->
    <!-- 新建批次 -->
    <new-batch :dialog="dialog" :drawerDate="drawerDate"></new-batch>
    <!-- 高级筛选 -->
    <screen
      :dialog="dialog"
      :switchShow="switchShow"
      @sceneArr="sceneArr"
    ></screen>
    <!-- 抽屉 -->
    <drawer
      :dialog="dialog"
      :drawerDate="drawerDate"
      :batchForm="batchForm"
    ></drawer>
    <put-batch
      :dialog="dialog"
      :batchForm="batchForm"
      :drawerDate="drawerDate"
      :fileList="fileList"
      :fileName="fileName"
      v-if="dialog.putDrawerShowEject"
    ></put-batch>
    <!-- 更换负责人 -->
    <el-dialog
      title="更换负责人"
      :visible.sync="dialog.dialogPerCha"
      width="50%"
      @close="perClose"
      custom-class="dialogClass"
      :close-on-click-modal="false"
    >
      <charge-person
        v-if="dialog.dialogPerChaEject"
        ref="chaPer"
      ></charge-person>
      <span slot="footer">
        <el-button @click="dialog.dialogPerCha = false"> 取消 </el-button>
        <el-button type="primary" @click="onChangeChar"> 确定 </el-button>
      </span>
    </el-dialog>
    <drag-table
      :dialog="dialog"
      v-if="dialog.senceAdminEject"
      ref="dragTable"
    ></drag-table>
    <join-team
      :dialog="dialog"
      v-if="dialog.joinTeamShowEject"
      :drawerData="drawerDate"
      :type="type"
      :entities='entities'
    ></join-team>
    <transfer
      :dialog="dialog"
      :drawerData="drawerDate"
      :type="type"
      v-if="dialog.transferShowEject"
    ></transfer>
  </div>
</template>

<script>
let defaltForm = {
  name: "",
  name2: "",
  value1: "",
  value3: "",
  radio: "1",
  radio1: "1",
  radio2: "1",
  radio3: "1",
  radio4: "1",
  ipt: "",
  ipt1: "",
  ipt2: "",
  ipt3: "",
  ipt4: "",
};
import Drawer from "./conponents/drawer.vue";
import newBatch from "./conponents/newBatch.vue";
import Screen from "./conponents/screen.vue";
import TableSh from "./conponents/tableSh.vue";
import {
  getExamination,
  getexamBatch,
  delexamBatch,
  queryScene,
  getExport,
  distriBution,
  bindingPersonLiable,
  upeShelf,
  downShelf,
} from "@/api/signUp";
import { checkPay } from "@/api/currency";
import PutBatch from "./conponents/putBatch.vue";
import DragTable from "./conponents/batch/dragTable.vue";
// 负责人
import chargePerson from "@/components/chargePerson";
import joinTeam from "@/components/joinTeam/index.vue";
import Transfer from "@/components/joinTeam/transfer.vue";
import { rw, isDelete } from "@/api/team";
export default {
  components: {
    newBatch,
    Screen,
    Drawer,
    TableSh,
    PutBatch,
    DragTable,
    chargePerson,
    joinTeam,
    Transfer,
  },
  data() {
    return {
      entities:[],
      type: 1,
      tableHight: window.innerHeight - 330,
      chargeId: "",
      fileName: "",
      defaultParams: {
        label: "name",
        value: "sceneId",
        children: "sceneDataList",
        expandTrigger: "hover",
        checkStrictly: true,
      },
      scenArr: [],
      id: "",
      charge: "",
      pageNum: 1,
      total: 0,
      pageSize: 10,
      fileList: [],
      // 表单
      batchForm: {
        ...defaltForm,
      },
      // 控制表单的显示与隐藏
      switchShow: [
        {
          value: true,
          label: "批次名称",
          stage: "batchName",
        },
        {
          value: true,
          label: "考试名称",
          stage: "examinationName",
        },
        {
          value: true,
          label: "使用区域",
          stage: "areaName",
        },
        {
          value: true,
          label: "上架状态",
          stage: "openState",
        },
        {
          value: true,
          label: "报名开始时间",
          stage: "enrollStart",
          width: 120,
        },
        {
          value: true,
          label: "报名结束时间",
          stage: "enrollEnd",
          width: 120,
        },
        {
          value: true,
          label: "预计考试开始时间",
          stage: "examinationStart",
          width: 130,
        },
        {
          value: true,
          label: "预计考试结束时间",
          stage: "examinationEnd",
          width: 130,
        },
        {
          value: true,
          label: "终端缴费金额",
          stage: "terminalPrice",
          width: 100,
        },
        {
          value: true,
          label: "同行缴费金额",
          stage: "peersPrice",
          width: 120,
        },
        {
          value: true,
          label: "VIP客户缴费金额",
          stage: "memberPrice",
          width: 120,
        },
        {
          value: true,
          label: "是否允许个人报名",
          stage: "statusAllow",
          width: 130,
        },
        {
          value: true,
          label: "是否允许补考",
          stage: "makeUp",
          width: 100,
        },
        {
          value: true,
          label: "负责人",
          stage: "userName",
        },
        {
          value: true,
          label: "更新时间",
          stage: "updateTime",
        },
        {
          value: true,
          label: "创建人",
          stage: "createBy",
        },
        {
          value: true,
          label: "创建时间",
          stage: "createTime",
        },
      ],
      chargeList: [],
      options: [],
      disabled: false,
      ShelvesDisabled: false,
      multipleSelection: [], // 多选数组集合
      dialog: {
        dialogBatchVisible: false, //新增批次
        dialogScreenVisible: false, // 高级筛选
        batchDrawer: false, //抽屉
        dialogTableVisible: false,
        putDrawerShow: false,
        dialogPerCha: false,
        putDrawerShowEject: false,
        senceAdmin: false, //场景管理
        senceAdminEject: false,
        batchDrawerEject: false,
        joinTeamShowEject: false,
        joinTeamShow: false,
        editTeamShowEject: false,
        editTeamShow: false,
        transferShow: false,
        transferShowEject: false,
      },
      selShow: true,
      identification: "",
      value: "",
      drawerDate: {}, //抽屉的回显
      tableData: [],
    };
  },
  watch: {
    identification(newValue, oldValue) {
      if (newValue == "") {
        this.getList();
      }
    },
  },
  created() {
    this.getList();
    this.getScene();
    this.onCharge();
  },
  mounted() {
    document.addEventListener("click", this.bodyCloseMenus);
    window.onresize = () => {
      return (() => {
        this.tableHight = window.innerHeight - 330;
      })();
    };
  },
  beforeDestroy() {
    document.removeEventListener("click", this.bodyCloseMenus);
  },
  activated() {
    this.tableHight = window.innerHeight - 330;
  },
  methods: {
    // 新增团队
    addTeam() {
      this.dialog.joinTeamShowEject = true;
      this.$nextTick(() => {
        this.dialog.joinTeamShow = true;
      });
    },
    // 点击空白
    bodyCloseMenus(e) {
      let self = this;
      if (self.dialog.dialogTableVisible == true) {
        self.dialog.dialogTableVisible = false;
      }
    },
    // 上架
    upShelf() {
      upeShelf({
        id: this.chargeId,
      }).then((res) => {
        this.$message.success(res.msg);
        this.getList();
      });
    },
    // 下架
    downShelf() {
      downShelf({
        id: this.chargeId,
      }).then((res) => {
        this.$message.success(res.msg);
        this.getList();
      });
    },
    // 点击临时搜索
    scenSearch(id) {
      this.getList(id);
    },
    // 删除临时搜索
    scenDel(i) {
      this.scenArr.splice(i, 1);
      if (this.scenArr.length == 0) {
        this.getList();
      }
    },
    // 获取数组
    sceneArr(data) {
      this.scenArr.push(data);
    },
    querySceneList() {
      this.getList(this.value);
    },
    //管理
    admClick() {
      this.dialog.senceAdminEject = true;
      this.$nextTick(function () {
        this.dialog.senceAdmin = true;
      });
    },
    //新建场景
    selClick() {
      this.screen();
    },
    // 场景下拉框按钮
    visibleChange(visible, refName, onClick, onClick2) {
      if (visible) {
        const ref = this.$refs[refName];
        let popper = ref.$refs.popper;
        if (popper.$el) popper = popper.$el;
        if (
          !Array.from(popper.children).some(
            (v) => v.className === "el-cascader-menu__list"
          )
        ) {
          const el = document.createElement("ul");
          el.className = "el-cascader-menu__list";
          el.style =
            "border-top: solid 1px #E4E7ED; padding:0; color: #606266;";
          el.innerHTML = `<li class="el-cascader-node" >
                            <span class="el-cascader-node__label" style='color:#1267FA'>新建场景</span>
                            </li>
                        `;
          const el2 = document.createElement("ul");
          el2.className = "el-cascader-menu__list";
          el2.innerHTML = `<li class="el-cascader-node" >
                            <span class="el-cascader-node__label" style='color:#1267FA'>管理</span>
                            </li>
                        `;
          popper.appendChild(el);
          popper.appendChild(el2);
          el2.onclick = () => {
            onClick2 && onClick2();
            if (ref.toggleDropDownVisible) {
              ref.toggleDropDownVisible(false);
            } else {
              ref.visible = false;
            }
          };
          el.onclick = () => {
            // 底部按钮的点击事件 点击后想触发的逻辑也可以直接写在这
            onClick && onClick();
            // 以下代码实现点击后弹层隐藏 不需要可以删掉
            if (ref.toggleDropDownVisible) {
              ref.toggleDropDownVisible(false);
            } else {
              ref.visible = false;
            }
          };
        }
      }
    },
    perClone() {
      this.charge = "";
    },
    onChangeChar() {
      if (this.charge == "") return this.$message.error("请选择负责人");
      bindingPersonLiable({
        id: this.chargeId,
        userId: this.charge,
      }).then((res) => {
        this.$message.success(res.msg);
        this.getList();
        this.dialog.dialogPerCha = false;
      });
    },
    onCharge() {
      distriBution().then((res) => {
        this.chargeList = res.data;
      });
    },
    // 通用下载方法
    download(fileName) {
      // const baseURL: "https://tongxingzhou.cn/api",
      const baseURL = process.env.VUE_APP_BASE_API;
      window.location.href =
        baseURL +
        "/common/download?fileName=" +
        encodeURI(fileName) +
        "&delete=" +
        true;
    },
    /** 导出按钮操作 */
    getExl() {
      this.$confirm("是否确认导出所有角色数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return getExport();
        })
        .then((response) => {
          console.log(response);
          this.download(response.msg);
        });
    },
    handleChange(val) {
      this.getList(val[0]);
    },
    // 请求场景
    getScene() {
      queryScene({
        type: 1,
      }).then((res) => {
        if (res.default !== null) {
          res.scenes.unshift(res.default);
          this.options = res.scenes;
        } else {
          this.options = res.scenes;
        }
      });
    },
    // 关闭更换负责人
    perClose() {
      this.charge = "";
      this.dialog.dialogPerChaEject = false;
    },
    // 更换负责人
    changeCharge() {
      this.dialog.transferShowEject = true;
      this.$nextTick(function () {
        this.dialog.transferShow = true;
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
    //currentPage 改变时会触发
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    },
    // 获取所有批次
    async getList(id) {
      let res = await getExamination({
        identification: this.identification,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        sceneId: id,
      });
      this.tableData = res.rows;
      this.total = res.total;
    },
    getSwitchList(list) {
      this.$set(this, "switchShow", list);
    },
    showH(item, index) {
      let bole = false;
      if (item.label === "批次名称") {
        bole = true;
      }
      if (!item.value) bole = false;
      return bole;
    },
    updataSubmit(data) {
      this.switchShow = data;
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.entities=[]
      if (val.length !== 0) {
        this.chargeId = val[0].id;
        this.drawerDate = val[0];
        val.forEach(item=>{
          this.entities.push(item.id)
        })
      }
      this.selShow = false;
      this.multipleSelection = val;
      if (val.length == 0) {
        this.selShow = true;
      }
      console.log(val);
      if (val.length > 1 || (val.length == 1 && val[0].openState == "上架")) {
        this.ShelvesDisabled = true;
      } else {
        this.ShelvesDisabled = false;
      }
      if (val.length > 1) {
        this.disabled = true;
      } else {
        this.disabled = false;
      }
    },
    async drawer(row) {
      this.dialog.batchDrawer = true;
      let res = await getexamBatch(row.id);
      this.drawerDate = res.data;
    },
    screen() {
      this.dialog.dialogScreenVisible = true;
    },
    newBatch() {
      checkPay().then((res) => {
        if (res.wx == 2 && res.ali == 2 && res.yl == 2) {
          return this.$message.info("请配置支付方式！");
        }
        this.dialog.dialogBatchVisible = true;
      });
    },
    tableShow() {
      if (this.dialog.dialogTableVisible == false) {
        this.dialog.dialogTableVisible = true;
      } else {
        this.dialog.dialogTableVisible = false;
      }
    },
    // 删除
    async del() {
      let arr = [];
      for (let i = 0; i < this.multipleSelection.length; i++) {
        arr.push(this.multipleSelection[i].id);
      }
      const confirmResult = await this.$confirm(
        "此操作将永久删除该职位, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      /*如果用户确认打印confirm,如果用户取消显示cancel*/
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除!");
      } else {
        let userIds = [];
        this.multipleSelection.forEach((item) => {
          userIds.push(item.userId);
        });
        isDelete(userIds).then((res) => {
          if (res.data == true) {
            delexamBatch(arr).then((res) => {
              this.getList();
              return this.$message.success("删除成功！");
            });
          } else {
            this.$message.error("请联系负责人进行删除！");
          }
        });
      }
    },
    query() {
      this.getList();
    },
    async edit() {
      let ces = await rw({
        module: this.type,
        entity: this.drawerDate.id,
        userId: this.drawerDate.userId,
      });
      if (ces.data == true) {
        if (this.multipleSelection.length !== 0) {
          this.id = this.multipleSelection[0].id;
        }
        let res = await getexamBatch(this.id);
        console.log(res);
        this.drawerDate = res.data;
        this.batchForm.name = this.drawerDate.examinationId;
        this.batchForm.name2 = this.drawerDate.batchName;
        this.batchForm.ipt3 = this.drawerDate.areaId;
        this.batchForm.value1 = this.drawerDate.enrollTime;
        this.batchForm.value3 = this.drawerDate.examinationTime;
        this.batchForm.ipt = this.drawerDate.terminalPrice;
        this.batchForm.ipt1 = this.drawerDate.peersPrice;
        this.batchForm.ipt2 = this.drawerDate.memberPrice;
        this.batchForm.ipt4 = this.drawerDate.remark;
        this.batchForm.radio = this.drawerDate.statusAllow;
        this.batchForm.radio1 = this.drawerDate.openState;
        this.batchForm.radio2 = this.drawerDate.endState;
        this.batchForm.radio3 = this.drawerDate.pay;
        this.batchForm.radio4 = this.drawerDate.makeUp;
        this.fileName = this.drawerDate.fileName;
        this.fileList = [];
        if (
          this.drawerDate.fileName === null ||
          this.drawerDate.fileName == ""
        ) {
          this.fileList = [];
        } else {
          this.fileList.push({
            name: this.drawerDate.fileName,
            url: this.drawerDate.fileUrl,
          });
        }
        this.dialog.putDrawerShowEject = true;
        this.$nextTick(function () {
          this.dialog.putDrawerShow = true;
        });
      } else {
        this.$message.info("无编辑权限");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 74px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ececec;
  .bread {
    margin-top: 20px;
    margin-left: 5px;
    height: 30px;
    display: flex;
    vertical-align: middle;
    line-height: 30px;
    p {
      margin-left: 10px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #2b2b2b;
    }
  }

  .ipt {
    margin-top: 16px;
    width: 340px;
    /deep/ .el-input__inner {
      border-radius: 4px 0 0 4px;
    }
    .el-button--primary {
      border-radius: 0 4px 4px 0;
    }
  }
  .btn {
    margin-top: 16px;
    .el-button--primary {
      background-color: #ed732e;
      border: #ed732e;
    }
  }
}
.chooise {
  margin-top: 20px;
  .sel {
    margin: 0 14px;
  }
  .el-button {
    font-size: 14px;
    /deep/ span {
      margin-left: 5px;
    }
  }
}
.sel {
  margin-top: 20px;
  span {
    margin-right: 40px;
  }
}
/deep/ .is-leaf {
  text-align: center;
}
/deep/ .cell {
  text-align: center;
}
.batch {
  color: #1267fa;
}
.el-table {
  margin-top: 20px;
}
// /deep/.el-dialog {
//   transform: translateX(15%);
// }
/deep/.el-divider--horizontal {
  margin: 0 0 15px 0;
}
/deep/ .el-dialog__body {
  padding: 0 20px;
}

/deep/.el-table__body-wrapper {
  height: 695px;
}
.el-pagination {
  margin-top: 24px;
  /deep/ .el-pagination__total {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 25px;
  }
  /deep/ .btn-prev {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .btn-next {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-input__inner {
    // width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .more {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-pagination__jump {
    .el-input__inner {
      width: 40px;
      height: 40px;
    }
  }
}
.chaSel {
  margin: 20px 0;
  margin-left: 70px;
}
.table {
  position: relative;
  .wuhu {
    position: absolute;
    top: 45px;
    right: 0px;
    z-index: 9999;
    background-color: #fff;
    border: 1px solid #ececec;
  }
}
.ipt-el {
  width: 240px;
}
.sel-sence {
  margin-right: 10px;
}
.scenF {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  .scenF-content {
    display: flex;
    margin-left: 10px;
    margin-top: 10px;
    .scenF-detail {
      height: 36px;
      line-height: 36px;
      padding-left: 20px;
      padding-right: 20px;
      border: 1px solid #9aa1af;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      .el-icon-circle-close {
        transform: translateY(3px);
      }
    }
  }
}
</style>